<template>
  <div>
    <nav-bar>
      <div slot="title">登录</div>
    </nav-bar>
  <div class="login">
  <div class="all">
  	<img src="~assets/img/m5.png" class="welcome" />
  		<div class="user"></div>
  		<input v-model="username" name="username" type="text" class="userinput" size="34" placeholder="输入电话或邮箱">
  		<div class="password"></div>
  		<input v-model="password" name="password" type="password" class="userinput" size="34" placeholder="输入密码">
  		<input name="enter" type="button" value="登录" class="enter" @click="enter">
  		<input name="password" type="button" value="注册" @click="register" class="register">
  	<div class="remeber">
  		<div class="auto">
  			<input name="remeber1" type="checkbox" checked="checked"/>记住密码
  		</div>
  		<div class="auto">
  			<input name="auto1" type="checkbox" checked="checked"/>自动登录
  		</div>
  	</div>
  	<div class="remeber">
  		<div class="auto"><a href="" name="forget" title="">忘记密码</a></div>
  		<div class="auto"><a href="" name="forget" title="">其他登录方式</a></div>
  	</div>
  </div>
  </div>
  </div>
</template>

<script>
  import {login} from 'network/profile/user.js'
  import navBar from 'components/content/nav/navBar.vue'
  export default{
    name:'',
    data(){
      return {
        username:"1",
        password:"1",
        tel:"test",
        email:"1",
        address:"1",
        id:"1",
        img:"test",
        userInfo:{}
      }
    },
    computed:{
      userInfo2(){
        return {
          username:this.username,
          password:this.password,
          tel:"test",
          email:"test",
          address:"test",
          id:"test",
          img:"test",
        }
      }
    },
    methods:{
      test(){
        window.sessionStorage.setItem("user",JSON.stringify(this.userInfo2))

        this.$store.dispatch('initUser',this.userInfo).then(res=>console.log(res))
        this.$router.replace("/profile")
      },
      enter(){
        login(this.username,this.password).then(res=>{
          console.log(res.data.result,res.data.user,this.userInfo);
          if(res.data.result=="yes"){
            this.userInfo=res.data.user
            window.sessionStorage.setItem("user",JSON.stringify(this.userInfo))
            this.$store.dispatch('initUser',JSON.stringify(this.userInfo)).then(res=>console.log(res))
            this.$router.push("/profile")
          }
          if(res.data.result=="mail no"){
            console.log(res.data.result);
            alert("邮箱未注册")
          }
          if(res.data.result=="tel no"){
            console.log(res.data.result);
            alert("电话未注册")
          }
          if(res.data.result=="password no"){
            console.log(res.data.result);
            alert("密码错误")
          }
        }).catch(e=>{
          console.log(e);
          // this.test()
          alert("未知错误")
        })
      },
      register(){
        this.$router.push("/register")
      }
    },
    created() {
      let info={name:"a"}
      // console.log(window.localStorage.setItem("test",JSON.stringify(info)));
       // window.addEventListener('beforeunload', () => {
       //      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
       // })
      // console.log(this.$store);
    },

    components:{
      navBar
    }
  }
</script>

<style scoped>
  .login{
  	background:linear-gradient(to bottom,#0080FF,#00ec00);
  	height: calc(100vh - 43px - 40px);
  	top: 0;
  	left: 0;
  	background-repeat: no-repeat;
    position: relative;
  }
  .all{
  	position: absolute;
  	top: 50%;
  	left: 50%;
  	transform: translate(-50%,-50%);
  	display: flex;
  	flex-direction: column;
  	justify-content: flex-end;
    width: 85%;
  }
  .welcome{
  	width: 150px;
  	height: 150px;
  	margin: 0 auto;
  	/* margin-bottom: 80px; */
  }
  .form{
  	height: 100%;
  	width: 100%;
  }
  .user{

  	width:10%;
  	height:10%;
  }
  .userinput{
  	font-size: 20px;
  	width: 80%;
  	height: 20%;
  	border-top: none;
  	border-left: none;
  	border-right: none;
  	background: none;
  	display: block;
  	margin: 0 auto;
  	margin-top: 10%;
  }
  .password{

  	width: 10%;
  	height:10%;
  }
  .enter{
  	width: 90%;
  	height: 30%;
  	margin-top: 20%;
  	background: orange;
  	color: white;
  	text-align: center;
  	font-size: 20px;
  	font-family: 黑体;
  	border: none;
  	border-radius:25px;
  	display: block;
  	margin: 0 auto;
  	margin-top: 15%;
  	padding: 10px 0px;
  	box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .register{
  	width: 90%;
  	height: 10%;
  	margin-left: 10%;
  	margin-top:2%;       /*看不懂*/
  	background: royalblue;
  	color: white;
  	text-align: center;
  	font-size: 20px;
  	font-family: 黑体;
  	border: none;
  	border-radius:25px;       /*记得*/
  	display: block;
  	margin: 0 auto;
  	margin-top: 5%;
  	padding: 10px 0px;
  	box-shadow:0 0 3px 2px rgba(127, 127, 127, 0.5);
  }
  .bottom{
  	display: flex;
  }
  .remeber{
  	display: flex;
  	justify-content: space-between;
  	flex-direction: row;
  	padding: 0 10px;
  	height: 7vh;
  }
  .auto{
  	margin-top: 20px;
  	font-size: 15px;
  }
  input[type=checkbox]{
  	width: 15px;
  	height: 15px;
  	border-radius: 50%;
  }
  ::placeholder{
  	color: rgba(255, 255, 255, 0.4);
  }
  a{
  	text-decoration: none;
  }
</style>
